<template>
    <div class="main">
        <div class="main-header" style="justify-content: space-between;">
            <!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
            <div style="display: flex;">
                <el-input placeholder="请输入用户名、手机号、充值单号模糊查询" style="width: 320px;margin-right: 10px;" v-model="searchParamCp.keyword" size="mini" clearable>
                </el-input>
				<el-select v-model="searchParamCp.pay_status" placeholder="请选择打款状态" style="width:200px;margin-right: 10px;">
				    <el-option v-for="(item,index) in pay_statusList" :key="index" :label="item" :value="index">
				    </el-option>
				</el-select>
                <div class="timepick" style="margin-right: 10px;">
                    <el-date-picker clearable v-model="searchParamCp.createtime" value-format="yyyy-MM-dd" size="small" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
                <el-button size="mini" @click="reset()">重置</el-button>
				<el-button size="mini" type="primary" @click="exportExcel">导出</el-button>
            </div>
        </div>
        <el-table ref="table" class="main-table" :data="memberData" height="100%" border header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="39"></el-table-column>
            <el-table-column width="100px" align="center" label="用户名" prop="wxName" />
            <!-- <el-table-column width="120px" align="center" label="电话号码" prop="mainPhone" /> -->
            <el-table-column align="center" label="拉卡拉系统单号" prop="order_no" />
            <!-- <el-table-column align="center" width="120px" label="卡内余额" prop="acc_bal" /> -->
            <el-table-column align="center" label="充值单号" prop="order_sn" />
            <el-table-column align="center"  label="充值金额" prop="money" />

            <!-- <el-table-column align="center" label="上游流水号" prop="trade_no" /> -->
			<!-- 支付状态 0未支付 1已支付 -->
			<el-table-column label="支付状态" prop="pay_status" width="80px">
				<template slot-scope="{row}">
					<el-tag v-if="row.pay_status==0">未支付</el-tag>
					<el-tag v-if="row.pay_status==1" type="success">已支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="充值时间" prop="createtime">
			    <template slot-scope="{row}">
					<div v-if="row.createtime">{{row.createtime|formatDate}}</div>
			    </template>
			</el-table-column>
            <el-table-column align="center" label="支付时间" prop="paytime">
                <template slot-scope="{row}">
					<div v-if="row.paytime">{{row.paytime|formatDate}}</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
    </div>
</template>

<script>
import {
    get, post
} from "@/assets/js/http.js";
import { Result } from "element-ui";
import FileSaver from 'file-saver'
export default {
    name: "view-freeca",
    data() {
        return {
            memberData: [],
            searchParamCp: {},
            searchinfo: {
                keyword: '',
                createtime: [],
				pay_status:'',
            },
            page: 1,
            limit: 20,
            total: 0,
			pay_statusList:['未支付','已支付'],// 0未支付 1已支付
        }
    },
    mounted() {
        this.getTableList()
    },
    methods: {
        searchs() {

            this.page = 1
            this.searchinfo = {
                ...this.searchinfo,
                ...this.searchParamCp
            }
            this.getTableList()
        },
        reset() {
            this.page = 1
            this.searchParamCp = {}
            this.searchinfo = {
                keyword: '',
                createtime: [],
                pay_status: ''
            }
            this.getTableList()
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        async getTableList() {
            const data = await get({
                url: '/admin/finance.Recharge/wxRechargeList',
                // params: this.searchinfo,
				params: {
				    page: this.page,
				    limit: this.limit,
					...this.searchinfo,
					...{
						createtime: this.searchinfo.createtime.length ? this.searchinfo.createtime.join(
							' - ') : ''
					}
				},
                loading: true,

            });
            const list = data.list
            this.total = data.total
            this.memberData = list
        },
        onCurrentChange(index) {
            this.page = index;
            this.$nextTick(() => {
                this.getTableList();
            })
        },
		exportExcel() {
			get({
				url: '/admin/finance.Recharge/exportWx',
				export:true,
				params: {
					...this.searchinfo,
					...{
						createtime: this.searchinfo.createtime.length ? this.searchinfo.createtime.join(
							' - ') : ''
					}
				}
			}).then(res=>{
				let link = document.createElement('a')
				FileSaver.saveAs(res,'微信充值报表.xlsx')
			})
		}
    }
}
</script>
